.fm-right-account-block .fm-account-vpn .setup-step-heading {
    margin-bottom: 16px;
    font: var(--text-h3);
    color: var(--text-color-high);
}

.fm-right-account-block .fm-account-vpn .step-device {
    margin-bottom: 8px;
    font: var(--text-body1);
    color: var(--text-color-high);
}

.fm-right-account-block .fm-account-vpn .step-device.more-info {
    margin-bottom: 0;
    margin-top: 12px;
    text-decoration: underline;
}

.fm-right-account-block .fm-account-vpn .settings-left-block .step-device .clickurl.vpn-link {
    color: var(--text-color-high);
}

.fm-right-account-block .fm-account-vpn .step-desc {
    font: var(--text-body2);
    color: var(--text-color-medium);
}

.fm-right-account-block .fm-account-vpn .desktop-download-links {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
}
.fm-right-account-block .fm-account-vpn .desktop-download-links > * {
    margin-inline-end: 12px;
    margin-bottom: 12px;
}

.fm-right-account-block .fm-account-vpn .qr-img canvas {
    padding: 10px;
    background-color: var(--secondary-white);
    border-radius: 10px;
}

.fm-right-account-block .fm-account-vpn .download-qrs {
    margin-top: 18px;
    display: flex;
}

.fm-right-account-block .fm-account-vpn .download-qr {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-right: 32px;
}

.fm-right-account-block .fm-account-vpn .download-qr .qr-img {
    margin-bottom: 4px;
}

.fm-right-account-block .fm-account-vpn .credentials-heading {
    margin-top: 32px;
}
.fm-right-account-block .fm-account-vpn .mobile-config-heading {
    margin-top: 16px;
}

.fm-right-account-block .fm-account-vpn .config-qr {
    width: fit-content;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.fm-right-account-block .fm-account-vpn .vpn-link.windows {
    margin-inline-end: 12px;
}
.fm-right-account-block .fm-account-vpn .vpn-link.clickurl:not(.mega-button) {
    color: var(--text-color-info);
}

.fm-right-account-block .fm-account-vpn .mega-button {
    padding-left: 12px;
    padding-right: 12px;
}

/* region Old */

.fm-right-account-block .fm-account-vpn {
    padding: 32px;
    display: flex;
    flex-flow: column nowrap;
}

.fm-right-account-block .fm-account-vpn .top-actions {
    display: flex;
    flex-direction: row-reverse;
    margin: 16px 0;
}

.fm-right-account-block .fm-account-vpn .top-actions .js-create-cred:disabled {
    color: var(--icon-inactive);
    cursor: default;
}
.fm-right-account-block .fm-account-vpn .top-actions .js-create-cred:disabled i::before {
    color: var(--icon-inactive);
}

.fm-right-account-block .fm-account-vpn .creds-container {
    display: flex;
    flex-flow: column nowrap;
}

.fm-right-account-block .fm-account-vpn .vpn-cred {
    background-color: var(--surface-main);
    border: 1px solid var(--stroke-grey-2);
    border-radius: 8px;
}

.fm-right-account-block .fm-account-vpn .vpn-cred > .heading {
    padding: 8px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: var(--surface-grey-1);
}

.fm-right-account-block .fm-account-vpn .vpn-cred > .heading .heading-label {
    margin: 0;
    font: var(--text-h3-bold);
    color: var(--text-color-higher);
}

.fm-right-account-block .fm-account-vpn .vpn-cred > .heading i.control {
    --icon-size: 24px;
    --mask-color: var(--icon-inactive);
    cursor: pointer;
    transition: var(--transition-opacity), var(--transition-color);
    opacity: 0;
}
.fm-right-account-block .fm-account-vpn .vpn-cred:hover > .heading i.control {
    opacity: 1;
}
.fm-right-account-block .fm-account-vpn .vpn-cred > .heading i.control:hover {
    --mask-color: var(--icon-active);
}

/* endregion */

/* region beta */

.fm-right-account-block .fm-account-vpn .title-txt {
    font: var(--text-h2-bold);
}

.fm-right-account-block .fm-account-vpn .upgrade-to-pro {
    margin-top: 12px;
}

.fm-right-account-block .fm-account-vpn .contact-support {
    display: flex;
    align-items: center;
}
.fm-right-account-block .fm-account-vpn .contact-support .icon-email-filled {
    --mask-color: var(--icon-rest);
}

.fm-right-account-block .fm-account-vpn .page-heading {
    margin-bottom: 16px;
    font: var(--text-h3-bold);
    color: var(--text-color-high);
}

.fm-right-account-block .fm-account-vpn .step2-actions {
    margin-bottom: 32px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.fm-right-account-block .fm-account-vpn .step2-actions .location-icon {
    --icon-size: 20px;
    margin-right: 20px;
    color: var(--icon-active);
}

.fm-right-account-block .fm-account-vpn .step2-actions .location-dropdown {
    width: 152px;
    margin: 0 16px 0 0;
}

.fm-right-account-block .fm-account-vpn .step2-out {
    display: flex;
    flex-direction: row;
}

.fm-right-account-block .fm-account-vpn .cred-slot {
    width: 183px;
    padding: 8px 12px;
    margin-bottom: 12px;
    margin-right: 16px;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    background-color: var(--surface-grey-2);
    color: var(--stroke-grey-1);
}

.fm-right-account-block .fm-account-vpn .cred-slot .label {
    margin: 0;
    font: var(--text-h3);
    color: var(--text-color-medium);
    cursor: default;
}

.fm-right-account-block .fm-account-vpn .cred-slot i.sprite-fm-mono {
    --icon-size: 20px;
    --mask-color: var(--icon-active);
    display: none;
    cursor: pointer;
}

.fm-right-account-block .fm-account-vpn .cred-slot.active i.sprite-fm-mono {
    display: block;
}

.fm-right-account-block .fm-account-vpn .cred-slot.active.recent {
    background-color: var(--surface-black);
}

.fm-right-account-block .fm-account-vpn .cred-slot.active.recent .label {
    color: var(--text-color-white-high);
}

.fm-right-account-block .fm-account-vpn .cred-slot.active.recent i.sprite-fm-mono {
    --mask-color: var(--icon-active-inverted);
}
.theme-dark .fm-right-account-block .fm-account-vpn .cred-slot.active.recent i.sprite-fm-mono {
    --mask-color: var(--icon-active);
}

.fm-right-account-block .fm-account-vpn .post-create-section {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.fm-right-account-block .fm-account-vpn .post-create-section .config-actions {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 16px 0;
}

.fm-right-account-block .fm-account-vpn .post-create-section .view-ini-config {
    all: unset;
    color: var(--label-blue);
    cursor: pointer;
}

.fm-right-account-block .fm-account-vpn .post-create-section .view-ini-config:hover {
    color: var(--label-blue-hover);
}

.fm-right-account-block .fm-account-vpn .post-create-section .config-output .copy {
    color: var(--text-color-medium)
}

/* endregion */
